<template>
  <div class="login-view">
    <van-nav-bar
      title="注册"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <van-cell-group>
      <van-field
        v-model="phone"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <van-field
        v-model="password"
        type="password"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="passwordAgain"
        type="password"
        label="确认密码"
        placeholder="请再次输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>

    <van-button
      :type="isLoading ? 'success' : 'primary'"
      block
      :loading="isLoading"
      :loading-text="isLoading ? '加载中...' : ''"
      @click="register"
      >注册
    </van-button>

    <div class="login-footer">
      <van-checkbox v-model="agree">
        未注册手机号登录后将自动生成账号，且代表你已阅读并同意
        <a href="#">《用户服务协议》</a>、
        <a href="#">《隐私政策》</a>
      </van-checkbox>
    </div>
  </div>
</template>
<script setup lang="ts">
//依赖导入区
import { ref } from "vue";
import { useRouter } from "vue-router";
import http from "../../utils/http";
import { showNotify } from "vant";
//变量区:
//1.创建路由实例
const router = useRouter(); // 正确地获取路由器实例
//2.手机号码
const phone = ref("");
//3.密码
const password = ref("");
//4.再次确认密码
const passwordAgain = ref("");
//5.同意协议
const agree = ref(false);
//6.是否按钮更换
const isLoading = ref(false);
//方法区:
//1.点击左上方的返回按钮
const onClickLeft = () => {
  router.back();
};
//2.点击注册按钮
const register = async () => {
  try {
    console.log("注册按钮被点击");
    if (!phone.value) {
      showNotify({
        type: "danger",
        message: "手机号码不能为空",
        duration: 1000,
      });
      return;
    } else if (!password.value) {
      showNotify({ type: "danger", message: "密码不能为空", duration: 1000 });
      return;
    } else if (password.value != passwordAgain.value) {
      showNotify({
        type: "danger",
        message: "两次输入的密码不一致",
        duration: 1000,
      });
      return;
    } else if (!agree.value) {
      showNotify({
        type: "danger",
        message: "请同意用户协议和隐私政策",
        duration: 1000,
      });
      return;
    } else {
      //1.发送注册请求
      isLoading.value = true; //将按钮变为加载状态
      const result = await sendRegisterRequest();
      //2.判断是否注册成功
      if (result === "success") {
        // 成功的消息通知
        showNotify({ type: "success", message: "注册成功!", duration: 1000 });
        // 等待通知展示完成
        await new Promise((resolve) => setTimeout(resolve, 1000)); // 等待1000毫秒
        //自动路由到登录页面
        router.back();
      } else {
        showNotify({ type: "danger", message: "注册失败!", duration: 1000 });
      }
    }
    isLoading.value = false; //取消按钮的加载状态
  } catch (error) {
    console.error("登录过程中发生错误：", error);
  }
};
//3.发送注册请求
const sendRegisterRequest = async () => {
  try {
    const response = await http.get("/user/register", {
      params: {
        username: phone.value,
        password: password.value,
      },
    });
    if (response.data.msg === "success") {
      return "success";
    } else {
      return "error";
    }
  } catch (error) {
    console.error(error);
  }
};
</script>
<style scoped>
::v-deep(.van-nav-bar) {
  background-color: white;
}
.login-view {
  padding: 20px;
}

.login-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.login-footer .van-button {
  font-size: 14px;
}
</style>
